<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JCuPupw 组件演示</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="jcupupw.css">
</head>
<body>
    <div class="demo-container">
        <h1>JCuPupw 组件演示</h1>
        
        <!-- 模态框触发按钮 -->
        <div class="button-group">
            <button class="demo-button" onclick="openDefaultModal()">基本模态框</button>
            <button class="demo-button" onclick="openFormModal()">表单模态框</button>
            <button class="demo-button" onclick="openLoadingModal()">加载状态模态框</button>
            <button class="demo-button" data-modal-target="#dynamicModal" 
                    data-modal-title="动态内容"
                    data-modal-content="这是通过HTML属性设置的动态内容"
                    data-modal-size="small"
                    data-modal-buttons='[{"text":"确认","action":"handleConfirm","type":"success"},{"text":"取消","type":"danger"}]'>
                HTML触发模态
            </button>
        </div>

        <!-- Toast 触发按钮 -->
        <div class="button-group">
            <button class="demo-button success" onclick="showSuccessToast()">成功提示</button>
            <button class="demo-button danger" onclick="showErrorToast()">错误提示</button>
            <button class="demo-button warning" onclick="showWarningToast()">警告提示</button>
            <button class="demo-button info" onclick="showInfoToast()">信息提示</button>
        </div>
    </div>

    <script src="jcupupw.js"></script>
    <script>
        // 默认模态实例
        const defaultModal = new JCuPupw('#jcModal', {
            buttons: [{
                text: '确认',
                type: 'success',
                action: () => {
                    JCuToast.success('操作已确认!', { position: 'top-center' });
                }
            }]
        });

        // 打开基本模态框
        function openDefaultModal() {
            new JCuPupw().open({
                title: '删除确认',
                content: '确定要删除这个项目吗？此操作不可恢复。',
                size: 'small',
                buttons: [{
                    text: '取消',
                    type: 'danger',
                    action: () => console.log('取消删除')
                }, {
                    text: '确认删除',
                    type: 'outline',
                    action: () => {
                        JCuToast.success('项目已删除');
                        console.log('执行删除操作');
                    }
                }]
            });
        }

        // 表单模态框
        function openFormModal() {
            new JCuPupw().open({
                title: '用户反馈',
                size: 'large',
                form: {
                    fields: [
                        {
                            id: 'feedbackType',
                            label: '反馈类型',
                            type: 'select',
                            options: ['建议', '错误报告', '功能请求']
                        },
                        {
                            id: 'feedbackContent',
                            label: '反馈内容',
                            type: 'textarea',
                            placeholder: '请详细描述您的反馈...'
                        }
                    ],
                    submit: {
                        text: '提交反馈',
                        type: 'success'
                    },
                    onSubmit: (data) => {
                        console.log('提交的表单数据:', data);
                        JCuToast.info('反馈已提交，感谢！');
                    }
                }
            });
        }

        // 加载状态模态框
        function openLoadingModal() {
            const modal = new JCuPupw().open({
                title: '正在处理...',
                content: '请稍候，数据加载中...',
                closable: false
            });
            
            modal.showLoading();
            
            // 模拟异步操作
            setTimeout(() => {
                modal.hideLoading().close();
                JCuToast.success('加载完成！');
            }, 2000);
        }

        // Toast 示例
        function showSuccessToast() {
            JCuToast.success('操作成功完成！', { 
                duration: 5000,
                position: 'bottom-right'
            });
        }

        function showErrorToast() {
            JCuToast.error('保存失败，请检查网络连接', {
                closable: true,
                position: 'top-center'
            });
        }

        function showWarningToast() {
            JCuToast.warning('文件超过大小限制', {
                duration: 3000,
                position: 'bottom-left'
            });
        }

        function showInfoToast() {
            JCuToast.info('新消息到达 (3)', { 
                position: 'top-right',
                queue: false
            });
        }

        // HTML触发的模态框处理
        function handleConfirm() {
            JCuToast.success('动态模态框操作已确认!');
        }
    </script>

    <style>
        /* 演示页面样式 */
        .demo-container {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
        }

        .button-group {
            margin: 30px 0;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .demo-button {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            background: var(--jc-primary);
            color: white;
            cursor: pointer;
            transition: var(--jc-transition);
            font-size: 14px;
        }

        .demo-button:hover {
            transform: translateY(-2px);
            box-shadow: var(--jc-shadow);
        }

        .demo-button.success { background: var(--jc-success); }
        .demo-button.danger { background: var(--jc-danger); }
        .demo-button.warning { background: var(--jc-warning); }
        .demo-button.info { background: var(--jc-info); }

        @media (max-width: 768px) {
            .demo-container {
                margin: 20px;
                padding: 10px;
            }
            
            .demo-button {
                flex: 1 1 100%;
            }
        }
    </style>
</body>
</html>
